<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'
import FloatingPanel from './components/FloatingPanel.vue'
import CoverLoading from '@/components/common/CoverLoading/CoverLoading.vue'

// Composables
import { useProjectData } from '@/composables/useProjectData'
import { useFloatingPanel } from '@/composables/useFloatingPanel'
import { useIframeEvents } from '@/composables/useIframeEvents'
import { useTagManager } from '@/composables/useTagManager'

// Composables
const { projectInfo, houseList, loading, fetchProjectInfo, fetchHouseList } = useProjectData()
const { anchors, panelHeight, isFloatingPanelShow, setPanelHeight, showPanel } = useFloatingPanel()
const { updateBuildingTagNames } = useTagManager()

const {
  iframeSDKManager,
  coverLoading,
  handleTagClickStart,
  createTagClickHandler,
  handleModelSwitchBefore,
  createModelSwitchCompleteHandler,
  handleTagHoverIn,
  handleWorkLoaded,
  createTagAllLoadedHandler,
  eventTypes
} = useIframeEvents()

// 移除事件监听
let removeEventListeners: (() => void) | null = null

// 点击标签处理函数
const handleTagClick = createTagClickHandler({
  onBuildingClick: async ({ project_id, building_id }) => {
    await fetchHouseList({ project_id, building_id })
  },
  onPanelHeightChange: setPanelHeight
})

// 模型切换完成处理函数
const handleModelSwitchComplete = createModelSwitchCompleteHandler({
  onDataFetch: async ({ project_id }) => {
    // 与标签加载完成函数冲突，所以这里不处理
  }
})

// 所有标签加载完成处理函数
const handleTagAllLoaded = createTagAllLoadedHandler({
  onInitialDataFetch: async (projectId: string) => {
    console.log(projectId)
    const projectInfo = await fetchProjectInfo(projectId)

    await fetchHouseList({
      project_id: projectId,
      building_id: projectInfo.buildingList[0].id // 默认building_id
    })
  },
  onTagsProcessed: async () => {},
  onComplete: async () => {
    await updateBuildingTagNames(projectInfo.value)
    setPanelHeight(anchors[0])
    showPanel()
  }
})

// 注册事件监听
const registerEventListeners = () => {
  const { TAG_CLICK, TAG_HOVER_IN, TAG_CLICK_START, MODEL_SWITCH_BEFORE, MODEL_SWITCH_COMPLETE } =
    eventTypes

  iframeSDKManager.on(TAG_CLICK, handleTagClick)
  iframeSDKManager.on(TAG_CLICK_START, handleTagClickStart)
  iframeSDKManager.on(TAG_HOVER_IN, handleTagHoverIn)
  iframeSDKManager.on(MODEL_SWITCH_BEFORE, handleModelSwitchBefore)
  iframeSDKManager.on(MODEL_SWITCH_COMPLETE, handleModelSwitchComplete)
}

// 移除事件监听
const unregisterEventListeners = () => {
  const { TAG_CLICK, TAG_HOVER_IN, TAG_CLICK_START, MODEL_SWITCH_BEFORE, MODEL_SWITCH_COMPLETE } =
    eventTypes

  iframeSDKManager.off(TAG_CLICK, handleTagClick)
  iframeSDKManager.off(TAG_CLICK_START, handleTagClickStart)
  iframeSDKManager.off(TAG_HOVER_IN, handleTagHoverIn)
  iframeSDKManager.off(MODEL_SWITCH_BEFORE, handleModelSwitchBefore)
  iframeSDKManager.off(MODEL_SWITCH_COMPLETE, handleModelSwitchComplete)
}

// 初始化
const initializeApp = () => {
  const { WORK_LOADED, TAG_ALL_LOADED } = eventTypes

  iframeSDKManager.once(WORK_LOADED, handleWorkLoaded)
  iframeSDKManager.on(TAG_ALL_LOADED, handleTagAllLoaded)

  registerEventListeners()

  removeEventListeners = () => {
    unregisterEventListeners()
    iframeSDKManager.off(TAG_ALL_LOADED, handleTagAllLoaded)
  }
}

onMounted(() => {
  initializeApp()
})

onUnmounted(() => {
  if (removeEventListeners) {
    removeEventListeners()
  }
})
</script>

<template>
  <div class="home">
    <FloatingPanel
      v-show="isFloatingPanelShow"
      v-model:height="panelHeight"
      :project-info="projectInfo"
      :house-list="houseList"
      :loading="loading"
      :content-draggable="true"
      :anchors="anchors"
    />

    <CoverLoading :show="coverLoading" />
  </div>
</template>

<style scoped lang="scss">
.home {
  :deep(.van-floating-panel__content) {
    max-height: 320px;
    padding: 0;
    overflow: hidden;
  }
}
</style>
